<template>
  <view>
    <view class="box_pay_pop">
      <view class="pay_num"><text class="for">￥</text>{{ amount }}</view>
      <u-radio-group v-model="payment">
        <view class="pay_item wx" @click="choosePayment('wxpay')">
          微信支付
          <u-radio
            class="self_check"
            name="wxpay"
            icon-size="36rpx"
          ></u-radio>
        </view>
        <!-- <view class="pay_item ali" @click="choosePayment('alipay')">
          支付宝支付
          <u-radio
            class="self_check"
            name="alipay"
            icon-size="36rpx"
          ></u-radio>
        </view> -->
      </u-radio-group>
      <view class="pay_btn_wrapper">
        <u-button type="primary" shape="circle" @click="submit"
          >立即支付</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PopupPayment',
  props: ['amount'],
  data () {
    return {
      payment: 'wxpay'
    }
  },
  mounted () {},
  methods: {
    submit () {
      this.$emit('handlerSubmit', this.payment)
    },
    choosePayment (payment) {
      this.payment = payment
    }
  }
}
</script>

<style lang="scss" scoped>
.box_pay_pop {
  .pay_btn_wrapper {
    padding: 60rpx 74rpx;
  }
  .pay_item {
    &.wx {
      background-image: $wx_pay_ico;
	  background-repeat:no-repeat;
	  background-position:6rpx center;
      background-size: 36rpx;
    }
    &.ali {
      background-image:$ali_pay_ico;
	  background-repeat: no-repeat;
	  background-position:6rpx center ;
      background-size: 40rpx;
    }
    .self_check {
      position: absolute;
      right: 30rpx;
      top: 38rpx;
    }
    position: relative;
    width: 690rpx;
    margin: 0 auto;
    padding: 32rpx 0 32rpx 60rpx;
    border-bottom: 2rpx solid #f8f8f8;
    font-size: 32rpx;
    color: #666666;
  }
  .pay_num {
    .for {
      font-size: 40rpx;
    }
    padding: 70rpx 0 50rpx;
    text-align: center;
    color: #ff6600;
    font-size: 54rpx;
  }
}
</style>
